<template>
  <div class="col-xs-12">
    <div class="card">
      <div v-if="loading" style="margin-top: 20%;margin-left: 50%">
        <pulse-loader></pulse-loader>
      </div>
      <div v-else>
        <grid-title :grid-name="$route.params.name"></grid-title>
        <grid-filter :table-entity.sync="tableEntity"></grid-filter>
        <div class="card-body">
          <grid-content :table-entity="tableEntity" :grid-key="$route.params.key"></grid-content>
          <pagenation-widget :table-entity="tableEntity"></pagenation-widget>
          <simple-form v-ref:simpleForm :show-form="showForm" :formconfig-entity.sync="formconfigEntity"
                       :is-add="isAdd" :fid="fid"></simple-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery';
  import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
  import GridTitle from '../widget/GridTitle.vue'
  import GridFilter from '../widget/GridFilter.vue'
  import GridContent from '../widget/GridContent.vue'
  import PagenationWidget from '../widget/PagenationWidget.vue'
  import SimpleGridMixin from '../../mixin/SimpleGridMixin';
  import request from 'superagent';
  require('../../assets/layer/skin/layer.css');
  require('../../assets/layer/layer');
  import SimpleForm from './SimpleForm.vue'

  export default{
    mixins: [SimpleGridMixin],

    //禁止vue-router重用
    route: {
      canReuse: function () {
        return false;
      }
    },

    asyncData() {
      this._loadData(0, null);
    },

    methods: {
      _loadData(index){
        var _self = this;
        let tableFilter = this._getFilterStr(this.tableEntity);
        request
          .get(window.serverUrl + 'admin/simplegrid/list')
          .query({uid: this.$route.params.key})
          .query({limit: this.limit})
          .query({offset: this.offset})
          .query(tableFilter)
          .end(function (err, res) {
            _self.loading = false;
            _self.tableEntity = res.body;
            _self.$broadcast('child-reload', res.body, index);
          });
      },
      _deleteEntity: function (id) {
        let _self = this;
        request
          .get(window.serverUrl + '/admin/simplegrid/delete')
          .query({uid: this.$route.params.key})
          .query({id: id})
          .end(function (err, res) {
            layer.msg('删除成功');
            _self._loadData(0);
          })
      },
      _add: function () {
        this.isAdd = true;
        this.fid = "";
        let _self = this;
        request
          .get(window.serverUrl + 'admin/common/loadConfig')
          .query({uid: this.$route.params.key})
          .end(function (err, res) {
            let obj = JSON.parse(res.body.metaconfig);
            for (let i = 0; i < obj.formConfigs.length; i++) {
              if (obj.formConfigs[i].datasource != null && obj.formConfigs[i].datasource != "") {
                obj.formConfigs[i].datasource = JSON.parse(obj.formConfigs[i].datasource);
                //必填项默认给值
                if (obj.formConfigs[i].isRequire == true) {
                  obj.formConfigs[i].value = obj.formConfigs[i].datasource[0].key;
                }
              }
            }
            _self.formconfigEntity = obj;
            layer.open({
              type: 1,
              skin: 'layui-layer-molv',
              area: ['800px', '650px'],
              content: $('#simpleForm')
            });
          });
      },
      _edit: function (id) {
        this.isAdd = false;
        this.fid = id;
        let _self = this;
        request
          .get(window.serverUrl + 'admin/common/loadConfig')
          .query({uid: this.$route.params.key})
          .query({id: id})
          .end(function (err, res) {
            let obj = JSON.parse(res.body.metaconfig);
            for (let i = 0; i < obj.formConfigs.length; i++) {
              if (obj.formConfigs[i].value == null) {
                obj.formConfigs[i].value = "";
              }
              if (obj.formConfigs[i].datasource != null && obj.formConfigs[i].datasource != "") {
                obj.formConfigs[i].datasource = JSON.parse(obj.formConfigs[i].datasource);
              }
            }
            _self.formconfigEntity = obj;
            layer.open({
              type: 1,
              skin: 'layui-layer-molv',
              area: ['800px', '650px'],
              content: $('#simpleForm')
            });
          });

      }
    },

    events: {
      'reload': function () {
        this._loadData(0);
      },
      'filter': function () {
        this._loadData(0);
      },
      'page': function (offset) {
        this.offset = offset;
        this._loadData(offset);
      },
      'delete': function (id) {
        this._deleteEntity(id);
      },
      'add': function (id) {
        this._add();
      },
      'edit': function (id) {
        this._edit(id);
      },
      'submitFinish': function (msg) {
        layer.msg(msg);
        this._loadData(0);
      }
    },

    data(){
      return {
        limit: 50,
        offset: 0,
        loading: true,
        tableEntity: [],
        formconfigEntity: [],
        isAdd: false,
        fid: ""
      }
    },

    components: {
      GridTitle,
      GridFilter,
      PulseLoader,
      GridContent,
      PagenationWidget,
      SimpleForm
    }
  }
</script>
